<template>
  <div class="purchase-order-tracking">
    <!-- 筛选区域 -->
    <el-form :model="form" inline class="filter-form" label-width="80px">
      <!-- 日期范围 -->
      <el-form-item label="单据日期">
        <el-date-picker
          v-model="form.dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="YYYY-MM-DD"
          :default-value="[new Date('2025-06-01'), new Date('2025-06-24')]"
        />
      </el-form-item>

      <!-- 供应商筛选（弹窗） -->
      <el-form-item label="供应商">
        <el-input
          v-model="form.supplier"
          placeholder="请选择供应商"
          readonly
          @click="supplierDialogVisible = true"
        />
      </el-form-item>

      <!-- 业务员筛选（弹窗） -->
      <el-form-item label="业务员">
        <el-input
          v-model="form.salesman"
          placeholder="请选择业务员"
          readonly
          @click="salesmanDialogVisible = true"
        />
      </el-form-item>

      <!-- 商品筛选（弹窗） -->
      <el-form-item label="商品">
        <el-input
          v-model="form.goods"
          placeholder="请选择商品"
          readonly
          @click="goodsDialogVisible = true"
        />
      </el-form-item>

      <!-- 查询按钮 -->
      <el-form-item>
        <el-button type="primary" @click="handleQuery">查询</el-button>
      </el-form-item>

      <!-- 展开条件 -->
      <el-form-item>
        <el-dropdown trigger="click">
          <el-button type="text" icon="el-icon-arrow-down">展开条件</el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>高级筛选</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-form-item>
    </el-form>

    <!-- 操作栏 -->
    <div class="action-bar">
      <el-button type="success" @click="handleExport">导出</el-button>
      <el-button type="info" @click="handlePrint">打印</el-button>
    </div>

    <!-- 采购订单表格 -->
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      :header-cell-style="{ background: '#F8F9FA' }"
    >
      <el-table-column prop="code" label="商品编号" width="120" />
      <el-table-column prop="name" label="商品名称" width="150" />
      <el-table-column prop="spec" label="规格型号" width="120" />
      <el-table-column prop="brand" label="品牌" width="100" />
      <el-table-column prop="unit" label="单位" width="80" />
      <el-table-column prop="note" label="商品备注" width="120" />
      <el-table-column prop="orderDate" label="订单日期" width="120" />
      <el-table-column prop="orderNo" label="采购订单编号" width="180" />
      <el-table-column prop="supplier" label="供应商" width="200" />
      <el-table-column prop="salesman" label="业务员" width="120" />
      <el-table-column prop="warehouse" label="仓库" width="120" />
      <el-table-column prop="status" label="状态" width="100">
        <template #default="scope">
          <el-tag :type="scope.row.status === '未入库' ? 'info' : 'success'">
            {{ scope.row.status }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>

    <!-- 供应商选择弹窗 -->
    <el-dialog title="选择供应商" v-model="supplierDialogVisible" width="600px">
      <el-form :model="supplierSearch" inline class="mb-4">
        <el-form-item label="搜索">
          <el-input
            v-model="supplierSearch.keyword"
            placeholder="供应商编号/名称/联系人"
            clearable
            @keyup.enter="searchSuppliers"
          />
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="supplierSearch.showForbidden"
            >显示禁用供应商</el-checkbox
          >
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchSuppliers">查询</el-button>
          <el-button @click="resetSupplierSearch">刷新</el-button>
        </el-form-item>
      </el-form>

      <el-table
        :data="supplierList"
        border
        @selection-change="handleSupplierSelection"
      >
        <el-table-column type="selection" width="50" />
        <el-table-column prop="code" label="编号" width="120" />
        <el-table-column prop="name" label="名称" width="200" />
        <el-table-column prop="type" label="类别" width="120" />
        <el-table-column
          prop="initialPayable"
          label="期初应付款"
          width="150"
          align="right"
        />
      </el-table>

      <div class="dialog-footer mt-4">
        <el-pagination
          @size-change="handleSupplierSizeChange"
          @current-change="handleSupplierCurrentChange"
          :current-page="supplierPage.current"
          :page-sizes="[10, 20, 50]"
          :page-size="supplierPage.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="supplierTotal"
          style="float: left"
        ></el-pagination>
        <el-button @click="supplierDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmSupplier">确定</el-button>
      </div>
    </el-dialog>

    <!-- 业务员选择弹窗 -->
    <el-dialog title="选择业务员" v-model="salesmanDialogVisible" width="600px">
      <el-form :model="salesmanSearch" inline class="mb-4">
        <el-form-item label="搜索">
          <el-input
            v-model="salesmanSearch.keyword"
            placeholder="职员编号/名称"
            clearable
            @keyup.enter="searchSalesmen"
          />
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="salesmanSearch.showForbidden"
            >显示禁用职员</el-checkbox
          >
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchSalesmen">查询</el-button>
          <el-button @click="resetSalesmanSearch">刷新</el-button>
        </el-form-item>
      </el-form>

      <el-table
        :data="salesmanList"
        border
        @selection-change="handleSalesmanSelection"
      >
        <el-table-column type="selection" width="50" />
        <el-table-column prop="code" label="职员编号" width="120" />
        <el-table-column prop="name" label="职员名称" width="200" />
      </el-table>

      <div class="dialog-footer mt-4">
        <el-pagination
          @size-change="handleSalesmanSizeChange"
          @current-change="handleSalesmanCurrentChange"
          :current-page="salesmanPage.current"
          :page-sizes="[10, 20, 50]"
          :page-size="salesmanPage.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="salesmanTotal"
          style="float: left"
        ></el-pagination>
        <el-button @click="salesmanDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmSalesman">确定</el-button>
      </div>
    </el-dialog>

    <!-- 商品选择弹窗 -->
    <el-dialog title="选择商品" v-model="goodsDialogVisible" width="800px">
      <el-form :model="goodsSearch" inline class="mb-4">
        <el-form-item label="搜索">
          <el-input
            v-model="goodsSearch.keyword"
            placeholder="商品编号/名称/型号/品牌"
            clearable
            @keyup.enter="searchGoods"
          />
        </el-form-item>
        <el-form-item label="仓库">
          <el-select v-model="goodsSearch.warehouse" placeholder="(空)">
            <el-option label="空" value=""></el-option>
            <el-option label="主仓库" value="main"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="goodsSearch.showZeroStock"
            >零库存商品</el-checkbox
          >
          <el-checkbox v-model="goodsSearch.showForbidden"
            >显示禁用商品</el-checkbox
          >
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchGoods">查询</el-button>
          <el-button @click="resetGoodsSearch">刷新</el-button>
        </el-form-item>
      </el-form>

      <div class="goods-container">
        <!-- 商品表格 -->
        <div class="goods-table">
          <el-table
            :data="goodsList"
            border
            @selection-change="handleGoodsSelection"
          >
            <el-table-column type="selection" width="50" />
            <el-table-column label="图片" width="60">
              <template #default="scope">
                <el-image
                  v-if="scope.row.image"
                  :src="scope.row.image"
                  style="width: 40px; height: 40px"
                  fit="cover"
                />
                <span v-else class="no-img">无图</span>
              </template>
            </el-table-column>
            <el-table-column prop="code" label="商品编号" width="120" />
            <el-table-column prop="brand" label="品牌" width="100" />
            <el-table-column prop="origin" label="产地" width="100" />
            <el-table-column prop="name" label="商品名称" width="200" />
          </el-table>

          <div class="dialog-footer mt-2">
            <el-pagination
              @size-change="handleGoodsSizeChange"
              @current-change="handleGoodsCurrentChange"
              :current-page="goodsPage.current"
              :page-sizes="[10, 20, 50]"
              :page-size="goodsPage.size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="goodsTotal"
              style="float: left"
            ></el-pagination>
          </div>
        </div>

        <!-- 商品分类树 -->
        <div class="goods-category">
          <el-tree
            :data="categoryTree"
            :props="treeProps"
            default-expand-all
            show-checkbox
            @check="handleCategoryCheck"
          />
        </div>
      </div>

      <div class="dialog-footer mt-4">
        <el-button @click="goodsDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmGoods">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "PurchaseOrderTracking",
  data() {
    return {
      // 筛选表单
      form: {
        dateRange: ["2025-06-01", "2025-06-24"],
        supplier: "",
        salesman: "",
        goods: "",
      },

      // 采购订单数据（模拟5条+）
      tableData: [
        {
          code: "SP0002",
          name: "果味饮料",
          spec: "",
          brand: "",
          unit: "",
          note: "",
          orderDate: "2025-06-01",
          orderNo: "GHDD20250601001",
          supplier: "G00003 广州食品批发有限公司",
          salesman: "",
          warehouse: "默认仓库",
          status: "未入库",
        },
        {
          code: "SP0003",
          name: "脆饼",
          spec: "",
          brand: "",
          unit: "包",
          note: "",
          orderDate: "2025-06-01",
          orderNo: "GHDD20250601001",
          supplier: "G00003 广州食品批发有限公司",
          salesman: "",
          warehouse: "默认仓库",
          status: "未入库",
        },
        {
          code: "SP0004",
          name: "果汁",
          spec: "500ml",
          brand: "",
          unit: "瓶",
          note: "",
          orderDate: "2025-06-01",
          orderNo: "GHDD20250601001",
          supplier: "G00003 广州食品批发有限公司",
          salesman: "",
          warehouse: "默认仓库",
          status: "未入库",
        },
        {
          code: "SP0005",
          name: "虾片",
          spec: "",
          brand: "",
          unit: "包",
          note: "",
          orderDate: "2025-06-01",
          orderNo: "GHDD20250601001",
          supplier: "G00003 广州食品批发有限公司",
          salesman: "",
          warehouse: "默认仓库",
          status: "未入库",
        },
        {
          code: "SP0006",
          name: "白巧克力礼盒",
          spec: "60g*20块",
          brand: "",
          unit: "",
          note: "",
          orderDate: "2025-06-01",
          orderNo: "GHDD20250601001",
          supplier: "G00003 广州食品批发有限公司",
          salesman: "",
          warehouse: "默认仓库",
          status: "未入库",
        },
        {
          code: "SP0007",
          name: "进口巧克力",
          spec: "",
          brand: "",
          unit: "",
          note: "",
          orderDate: "2025-06-01",
          orderNo: "GHDD20250601001",
          supplier: "G00003 广州食品批发有限公司",
          salesman: "",
          warehouse: "默认仓库",
          status: "未入库",
        },
      ],

      // 供应商选择弹窗
      supplierDialogVisible: false,
      supplierSearch: { keyword: "", showForbidden: false },
      supplierList: [
        {
          code: "zhongtong",
          name: "中通快递",
          type: "物流",
          initialPayable: 0,
        },
        { code: "yunda", name: "韵达快递", type: "物流", initialPayable: 0 },
        { code: "yuantong", name: "圆通速递", type: "物流", initialPayable: 0 },
        { code: "sxjdfreight", name: "顺心", type: "物流", initialPayable: 0 },
        { code: "ems", name: "EMS", type: "物流", initialPayable: 0 },
        { code: "T001", name: "临时供应商", type: "临时", initialPayable: 0 },
        { code: "G00009", name: "测试111", type: "测试", initialPayable: 0 },
        { code: "G00008", name: "测试", type: "测试", initialPayable: 0 },
        { code: "G00007", name: "测试供应商", type: "测试", initialPayable: 0 },
        { code: "G00006", name: "供应商6", type: "普通", initialPayable: 1000 },
        { code: "G00005", name: "供应商5", type: "普通", initialPayable: 2000 },
        { code: "G00004", name: "供应商4", type: "普通", initialPayable: 3000 },
        {
          code: "G00003",
          name: "广州食品批发有限公司",
          type: "食品",
          initialPayable: 5000,
        },
        { code: "G00002", name: "供应商2", type: "普通", initialPayable: 6000 },
        { code: "G00001", name: "供应商1", type: "普通", initialPayable: 7000 },
      ],
      supplierPage: { current: 1, size: 10 },
      supplierTotal: 15,
      selectedSuppliers: [],

      // 业务员选择弹窗
      salesmanDialogVisible: false,
      salesmanSearch: { keyword: "", showForbidden: false },
      salesmanList: [
        { code: "D0001", name: "老板" },
        { code: "D0002", name: "财务-玲" },
        { code: "D0003", name: "采购-小陈" },
        { code: "D0004", name: "采购-小王" },
        { code: "D0005", name: "销售-小李" },
        { code: "D0006", name: "销售-小东" },
        { code: "D0007", name: "旗舰店店员" },
        { code: "D0008", name: "2店店员" },
        { code: "D0009", name: "1号仓库管员" },
      ],
      salesmanPage: { current: 1, size: 10 },
      salesmanTotal: 9,
      selectedSalesmen: [],

      // 商品选择弹窗
      goodsDialogVisible: false,
      goodsSearch: {
        keyword: "",
        warehouse: "",
        showZeroStock: true,
        showForbidden: true,
      },
      goodsList: [
        { code: "SP0001", name: "巧克力", brand: "", origin: "", image: "" },
        { code: "SP0002", name: "果味饮料", brand: "", origin: "", image: "" },
        { code: "SP0003", name: "脆饼", brand: "", origin: "", image: "" },
        { code: "SP0004", name: "果汁", brand: "", origin: "", image: "" },
        { code: "SP0005", name: "虾片", brand: "", origin: "", image: "" },
        {
          code: "SP0006",
          name: "白巧克力礼盒",
          brand: "",
          origin: "",
          image: "",
        },
        {
          code: "SP0007",
          name: "进口巧克力",
          brand: "",
          origin: "",
          image: "",
        },
      ],
      goodsPage: { current: 1, size: 20 },
      goodsTotal: 151,
      selectedGoods: [],
      categoryTree: [
        {
          label: "全部",
          children: [
            { label: "茶", children: [{ label: "绿茶" }] },
            {
              label: "酒类",
              children: [
                {
                  label: "红酒",
                  children: [{ label: "国产" }, { label: "进口" }],
                },
                { label: "酒" },
                { label: "啤酒" },
                { label: "葡萄酒" },
              ],
            },
            { label: "其它" },
            {
              label: "食品",
              children: [
                { label: "调味品" },
                { label: "进口食品" },
                { label: "零食" },
              ],
            },
            {
              label: "饮料",
              children: [
                { label: "果汁" },
                { label: "矿泉水" },
                { label: "乳品" },
              ],
            },
          ],
        },
      ],
      treeProps: { children: "children", label: "label" },
    };
  },
  methods: {
    // 查询采购订单
    handleQuery() {
      const filtered = this.tableData.filter((item) => {
        const inDateRange =
          item.orderDate >= this.form.dateRange[0] &&
          item.orderDate <= this.form.dateRange[1];
        const supplierMatch =
          !this.form.supplier || item.supplier.includes(this.form.supplier);
        const salesmanMatch =
          !this.form.salesman || item.salesman.includes(this.form.salesman);
        const goodsMatch =
          !this.form.goods ||
          item.code.includes(this.form.goods) ||
          item.name.includes(this.form.goods);
        return inDateRange && supplierMatch && salesmanMatch && goodsMatch;
      });
      console.log("筛选结果：", filtered);
      this.$message.success("查询成功");
    },

    // 导出
    handleExport() {
      this.$message.info("导出功能待实现");
    },

    // 打印
    handlePrint() {
      this.$message.info("打印功能待实现");
    },

    // 供应商弹窗 - 搜索
    searchSuppliers() {
      const filtered = this.supplierList.filter((item) => {
        const match =
          !this.supplierSearch.keyword ||
          item.code.includes(this.supplierSearch.keyword) ||
          item.name.includes(this.supplierSearch.keyword);
        return match && (this.supplierSearch.showForbidden || true);
      });
      this.supplierList = filtered;
      this.supplierTotal = filtered.length;
    },
    resetSupplierSearch() {
      this.supplierSearch = { keyword: "", showForbidden: false };
      this.supplierList = [
        /* 原始数据 */
      ]; // 实际需重置为全量列表
      this.supplierTotal = 15;
    },
    handleSupplierSelection(val) {
      this.selectedSuppliers = val;
    },
    confirmSupplier() {
      this.form.supplier = this.selectedSuppliers
        .map((item) => item.name)
        .join("、");
      this.supplierDialogVisible = false;
    },
    handleSupplierSizeChange(val) {
      this.supplierPage.size = val;
    },
    handleSupplierCurrentChange(val) {
      this.supplierPage.current = val;
    },

    // 业务员弹窗 - 搜索
    searchSalesmen() {
      const filtered = this.salesmanList.filter((item) => {
        const match =
          !this.salesmanSearch.keyword ||
          item.code.includes(this.salesmanSearch.keyword) ||
          item.name.includes(this.salesmanSearch.keyword);
        return match && (this.salesmanSearch.showForbidden || true);
      });
      this.salesmanList = filtered;
      this.salesmanTotal = filtered.length;
    },
    resetSalesmanSearch() {
      this.salesmanSearch = { keyword: "", showForbidden: false };
      this.salesmanList = [
        /* 原始数据 */
      ];
      this.salesmanTotal = 9;
    },
    handleSalesmanSelection(val) {
      this.selectedSalesmen = val;
    },
    confirmSalesman() {
      this.form.salesman = this.selectedSalesmen
        .map((item) => item.name)
        .join("、");
      this.salesmanDialogVisible = false;
    },
    handleSalesmanSizeChange(val) {
      this.salesmanPage.size = val;
    },
    handleSalesmanCurrentChange(val) {
      this.salesmanPage.current = val;
    },

    // 商品弹窗 - 搜索
    searchGoods() {
      const filtered = this.goodsList.filter((item) => {
        const match =
          !this.goodsSearch.keyword ||
          item.code.includes(this.goodsSearch.keyword) ||
          item.name.includes(this.goodsSearch.keyword);
        const warehouseMatch =
          !this.goodsSearch.warehouse ||
          item.warehouse === this.goodsSearch.warehouse;
        return (
          match &&
          warehouseMatch &&
          this.goodsSearch.showZeroStock &&
          this.goodsSearch.showForbidden
        );
      });
      this.goodsList = filtered;
      this.goodsTotal = filtered.length;
    },
    resetGoodsSearch() {
      this.goodsSearch = {
        keyword: "",
        warehouse: "",
        showZeroStock: true,
        showForbidden: true,
      };
      this.goodsList = [
        /* 原始数据 */
      ];
      this.goodsTotal = 151;
    },
    handleGoodsSelection(val) {
      this.selectedGoods = val;
    },
    handleCategoryCheck() {
      console.log("分类筛选触发"); // 实际需根据分类树过滤商品
    },
    confirmGoods() {
      this.form.goods = this.selectedGoods.map((item) => item.code).join("、");
      this.goodsDialogVisible = false;
    },
    handleGoodsSizeChange(val) {
      this.goodsPage.size = val;
    },
    handleGoodsCurrentChange(val) {
      this.goodsPage.current = val;
    },
  },
};
</script>

<style scoped>
.purchase-order-tracking {
  padding: 24px;
  background: #fff;
}

.filter-form {
  margin-bottom: 16px;
}

.action-bar {
  margin: 12px 0;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.el-table {
  margin-top: 10px;
}

.dialog-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.goods-container {
  display: flex;
  gap: 20px;
}

.goods-table {
  flex: 1;
}

.goods-category {
  width: 250px;
}

.no-img {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: #f5f7fa;
  border-radius: 4px;
  color: #999;
}
</style>